<template>
  <view class="flex flex-column">
    <!-- <u-navbar title=" " placeholder @leftClick="onLeftClick" leftIcon="close" /> -->

    <view class="flex1 flex flex-column between" style="margin-top: 20%">
      <view style="padding: 40rpx 40rpx">
        <view
          style="display: flex;flex-direction: column; justify-content: center;align-items: center;margin-top: 80rpx;">
          <image src="/static/images/loginLogoIcon.svg" style="width: 96rpx; height: 96rpx;margin-right: 14rpx" />
          <view class="primary-text-color font-500" style="font-size: 64rpx; margin-top: 44rpx">练促优</view>
          <view class="default-text-color" style="font-size: 22rpx;letter-spacing: 10rpx;margin-top: 20rpx">让学习更简单
          </view>
        </view>

        <view style="margin-top: 80rpx">
          <view :style="{
            padding: '24rpx 30rpx', border: '1rpx solid #F0F0F0', borderRadius: '12rpx', display: pageType === 'account' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center'
          }">
            <image src="/static/images/footerIcon2.svg" style="width: 40rpx; height: 40rpx; color: #666" />
            <input v-model="loginAccount" style="height: 24px; flex:1; margin-left: 20rpx" placeholder="请输入账号"
              :password="false" />
            <view v-show="loginAccount.length" style="margin-left: 20rpx" @click="loginAccount = ''">
              <u-icon v-show="loginAccount.length" name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
            </view>

          </view>
          <view :style="{
            padding: '24rpx 30rpx', marginTop: '32rpx', border: '1rpx solid #F0F0F0', borderRadius: '12rpx', display: pageType === 'account' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center'
          }">
            <image src="/static/images/loginLockIcon.svg" style="width: 40rpx; height: 40rpx; color: #666" />
            <input v-model="passwd" style="height: 24px; flex:1; margin-left: 20rpx" placeholder="请输入密码"
              :password="showPassword" />
            <view v-show="passwd.length">
              <u-icon @click="showPassword = !showPassword" name="eye" :color="showPassword ? '#8E8E8E' : '#344B7D'"
                size="40rpx"></u-icon>
            </view>
            <view @click="passwd = ''" v-show="passwd.length" style="margin-left: 20rpx">
              <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
            </view>
          </view>

          <view :style="{
            padding: '24rpx 30rpx', border: '1rpx solid #F0F0F0', borderRadius: '12rpx', display: pageType === 'phone' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center'
          }">
            <image src="/static/images/loginPhoneIcon.svg" style="width: 40rpx; height: 40rpx; color: #666" />
            <input v-model="phone" style="height: 24px; flex:1; margin-left: 20rpx" placeholder="请输入手机号"
              :password="false" />
            <view v-show="phone.length" style="margin-left: 20rpx" @click="phone = ''">
              <u-icon v-show="phone.length" name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
            </view>
          </view>

          <view :style="{
            padding: '24rpx 30rpx', marginTop: '32rpx', border: '1rpx solid #F0F0F0', borderRadius: '12rpx', display: pageType === 'phone' ? 'flex' : 'none', flexDirection: 'row', alignItems: 'center'
          }">
            <image src="../../static/images/loginCodeIcon.svg" style="width: 40rpx; height: 40rpx; color: #666" />
            <input v-model="code" style="height: 24px; flex:1; margin-left: 20rpx" placeholder="请输入验证码" />
            <view @click="code = ''" v-show="code.length" style="margin-left: 20rpx">
              <u-icon name="close-circle-fill" color="#8E8E8E" size="40rpx"></u-icon>
            </view>
            <view v-show="isShowGetCode" @click="onGetCode">获取验证码</view>
            <u-count-down v-if="!isShowGetCode" ref="countDown" :time="30 * 1000" format="ss" millisecond @finish="reset"
              @change="onChangeTime">
              <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
            </u-count-down>
          </view>

          <view type="default" hover-class="hoverClass" style="color:#fff; margin-top: 70rpx;"
            class="gradient-button footer-button" @click="onLogin">
            登录
          </view>

          <view type="default" hover-class="hoverClass" style="color:rgba(51, 51, 51, 1);margin-top: 40rpx;"
            class="ordinary-button footer-button" @click="pageType = (pageType === 'account' ? 'phone' : 'account')">
            {{ pageType === 'account' ? '验证码登录' : '账号登录' }}

          </view>
        </view>

        <view @click="checked = !checked"
          style="width: 100vw; padding: 3vh 0; text-align: center; font-size: 24rpx;"
          class="flex center item-center">
          <view class="flex center item-center" :class="checked ? 'active' : 'noActive'">
            <u-icon size="20rpx" :color="checked ? '#FFF' : '#FFF'" name="checkmark" />
          </view>

          <view style="color: #999; margin-left: 10rpx">
            勾选并同意
            <text @click.stop="onGoto('fw')" class="primary-text-color">《服务协议》</text>
            和
            <text @click.stop="onGoto('ys')" class="primary-text-color">《用户隐私协议》</text>
          </view>
        </view>
      </view>

      <view @click="onLeftClick"
        style="width: 100vw; color:rgba(102, 102, 102, 1); font-size: 32rpx; position: absolute; bottom: 2%; padding: 3vh 0; text-align: center; font-size: 24rpx; letter-spacing: 10rpx"
        class="flex center item-center" hover-class="hoverClass">
        暂不登录
      </view>

    </view>
  </view>
</template>

<script>
// import {appletLogin} from "@/services/ServerService";
import {
  aesFunContent,
  notificationFun
} from "@/utils/PrjUtils";
import { phoneReg } from "../../utils/PrjUtils";
import {
  mobileLogin, sendCode, miniLogin
} from "../../services/ServerService";
import { getUserVipInfo } from "../../otherPages/services/signInService";
export default {
  data() {
    return {
      phone: '',
      code: '',
      loginAccount: '',
      passwd: '',
      pageType: 'account',
      // loginAccount: '15510219870',
      // passwd: 'xnwz++116688.',
      checked: false,
      showPassword: true,
      isShowGetCode: true,
      timeData: {},
    }
  },
  methods: {
    onLeftClick() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    onGetCode() {
      const { phone } = this;
      if (phone.length === 0) {
        return notificationFun('请输入手机号！');
      }
      if (phoneReg.test(phone)) {
        sendCode(phone, 4).then(res => {
          this.isShowGetCode = false;
          notificationFun('发送成功请注意查收！');
        })
      } else {
        return notificationFun('请输入正确的手机号！');
      }
    },
    reset() {
      this.isShowGetCode = true;
    },
    onChangeTime(e) {
      this.timeData = e
    },
    onGoto(type) {
      uni.navigateTo({
        // https://yks.bjjrzy.com/info/dfyjkfbxy.html
        // https://yks.bjjrzy.com/info/dfyjkyinsi.html
        url: '/pages/login/openHtml?url=' + (type === 'ys' ?
          'https://yks.bjjrzy.com/info/dfyjkyinsi.html' :
          'https://yks.bjjrzy.com/info/dfyjkfbxy.html')
      })
    },
    onLogin() {
      const {
        pageType,
        checked,
        loginAccount,
        passwd,
        phone,
        code
      } = this;
      uni.getUserInfo({
        success: (value) => {
          console.log(value, "成功")
        },
        fail: (err) => {
          console.log(err, "错误")
        }
      })
      if (!checked) return notificationFun('请勾选并同意协议！')
      if (pageType === 'account') {
        if (!loginAccount) return notificationFun('请输入账号！')
        if (!passwd) return notificationFun('请输入密码！')
        miniLogin(aesFunContent(loginAccount), aesFunContent(passwd)).then(res => {
          uni.setStorageSync('appKey', res.appKey || '');
          getUserVipInfo().then(data => {
            uni.setStorageSync('loginData',{...res.loginUser,...data} || {});
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
          // uni.setStorageSync('loginData', res.loginUser || {});
        
        })
      } else {
        if (!phone) return notificationFun('请输入手机号！')
        if (!code) return notificationFun('请输入验证码！')
        mobileLogin(aesFunContent(phone), code).then(res => {
          uni.setStorageSync('appKey', res.appKey || '');
          // 获取vip信息
          getUserVipInfo().then(data => {
            uni.setStorageSync('loginData',{...res.loginUser,...data} || {});
            uni.switchTab({
              url: '/pages/index/index'
            })
          })
         
        })
      }

    }

  }
}
</script>

<style>
page {
  background-color: #FFF !important;
}

.active {
  background: rgba(55, 184, 116, 1);
  border-radius: 50%;
  padding: 4rpx;
  border: 1px solid rgba(55, 184, 116, 1);
}

.noActive {
  background: #FFF;
  border-radius: 50%;
  /* padding: 2px; */
  width: 13px;
  height: 13px;
  border: 1px solid #999;
}

.footer-button {
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24rpx;
  line-height: 90rpx;
}

.gradient-button {
  background: linear-gradient(90deg, rgba(55, 184, 116, 1) 23.62%, rgba(55, 184, 116, 1) 118.22%);
  color: #fff;
}

.ordinary-button {
  background: linear-gradient(90deg, rgba(242, 242, 242, 1) 23.62%, rgba(242, 242, 242, 1) 118.22%);

  color: #fff;
}

.hoverClass {
  opacity: 0.8;
}
</style>